<ng-template #template>
  <div *ngIf="canRender" [attr.id]="model.id" [class]="model.getContainerCss()" (focusin)="model.focusIn()" #panelContainer>
    <div *ngIf="model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
    <div *ngIf="model.hasDescription || model.hasTitle" [element]="model" sv-ng-element-header></div>
    <div *ngIf="!model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
    <div *ngIf="model.renderedIsExpanded" [style.paddingLeft]="model.innerPaddingLeft" [class]="model.cssClasses.panel.content" 
      [attr.id]="model.contentId" [attr.role]="model.ariaRole" [attr.aria-labelledby]="model.ariaLabelledBy"[attr.aria-label]="model.ariaLabel">
      <ng-container *ngFor="let row of model.visibleRows; trackBy: trackRowBy">
        <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
          <sv-ng-row [row]="row"></sv-ng-row>
        </ng-template>
      </ng-container>
      <sv-ng-action-bar [model]="model.getFooterToolbar()"></sv-ng-action-bar>
    </div>
  </div>
</ng-template>